<!--
 * @Author: your name
 * @Date: 2021-03-26 20:52:32
 * @LastEditTime: 2021-04-30 00:07:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /medicine-web/src/components/CustomInput/index.vue
-->
<template>
  <div :class="{'a-input-container': !isError, 'a-input-container__error': isError}">
    <slot name="iconPrefix"></slot>
    <input :type="typeStr" v-model="inputValue" class="input-pattern" :placeholder="placeholderStr" @keyup.enter="handleEnter">
    <slot name="iconSuffix" ></slot>
  </div>
</template>
<script>
export default {
  name: 'customInput',
  props: {
    value: {
      required: true
    },
    placeholderStr: {
      type: String,
      default: ''
    },
    typeStr: {
      type: String,
      default: 'text'
    },
    isError: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleEnter () {
      this.$emit('handleEnter', this.inputValue)
    }
  },
  computed: {
    inputValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/input.scss';
@import '~@/assets/styles/flex.scss';
.a-input-container {
  position: relative;
  border: 1px solid rgba(38, 61, 236, 0.3);
  font-size: 1.625rem;
  border-radius: 4px;
  // padding-left: 1.8125rem;
  // padding-top: 1.875rem;
  // padding-bottom: 1.5625rem;
  height: 100%;
  padding-left: 1.875rem;
  @include flex-def;
  @include flex-cCenter;
}
.a-input-container__error {
  position: relative;
  border: 1px solid #f5222d;
  font-size: 1.625rem;
  border-radius: 4px;
  // padding-left: 1.8125rem;
  // padding-top: 1.875rem;
  // padding-bottom: 1.5625rem;
  height: 5.2rem;
  padding-left: 1.875rem;
  @include flex-def;
  @include flex-cCenter;
}
.input-pattern {
  width: 80%;
  outline: none;
  border: none;
  background-color: transparent;
}
</style>